var React = require('react');
var AppView = require('../../common/component/view/app-view.node');

module.exports = function (props) {
  var newFlag = (props.crudType === 'new');
  var editFlag = (props.crudType === 'edit');
  var viewFlag = (props.crudType === 'view');

  return (
    <>
      <AppView hasNav={true}>

        <nav aria-label="breadcrumb" className="x-view-nav">
          <ol className="breadcrumb">
            <li className="breadcrumb-item">{"${t('ui.example.example2Search.title.example2')}"}</li>
            <li className="breadcrumb-item active" aria-current="page">{props.viewTitle}</li>
          </ol>
        </nav>

        <div className="x-view-title">
          {props.viewTitle}
        </div>

        <form>
          {!newFlag && (
            <div className="form-group">
              <label htmlFor="id">{"${t('ui.example.example2.field.id')}"}</label>
              <input type="text" className="form-control" id="id" name="id" data-x-name="id"
                readOnly={viewFlag || editFlag} />
            </div>
          )}
          <div className="form-group">
            <label htmlFor="exampleName">{"${t('ui.example.example2.field.exampleName')}"}</label>
            <input type="text" className="form-control" id="exampleName" name="exampleName" data-x-name="exampleName"
              readOnly={viewFlag} />
          </div>
          <div className="form-group">
            <label htmlFor="remark">{"${t('ui.example.example2.field.remark')}"}</label>
            <input type="text" className="form-control" id="remark" name="remark" data-x-name="remark"
              readOnly={viewFlag} />
          </div>
          <div className="form-group">
            <label htmlFor="enableFlag">{"${t('ui.example.example2.field.enableFlag')}"}</label>
            <select className="form-control" id="enableFlag" name="enableFlag" data-x-name="enableFlag"
              readOnly={viewFlag}>
              <option value="true">{"${t('ui.system.common.option.bool.true')}"}</option>
              <option value="false">{"${t('ui.system.common.option.bool.false')}"}</option>
            </select>
          </div>

          {!newFlag && (
            /* 版本号 */
            <input type="hidden" data-x-name="versionNumber" />
          )}

          <div className="x-footer-bar">
            {(newFlag || editFlag) && (
              <button data-x-ui="saveBtn" type="button" className="btn btn-primary">
                {"${t('ui.example.example2.btn.save')}"}
              </button>
            )}

            <button data-x-ui="backBtn" type="button" className="btn btn-primary">{"${t('ui.example.example2.btn.back')}"}</button>
          </div>
        </form>
      </AppView>
    </>
  )
};

